* {
    margin: 0;
    padding: 0;
}


body {
    background-color: #f6f6f6;
    display: block;
    flex-wrap: wrap;
    /*!* 增加 display: flex; *!*/
    flex-direction: column;
    justify-content: center;
    /*!* 增加 flex-direction: column; *!*/
    /*display: block;*/
}

header {
    background-color: #231C1A;
    height: 70px;
    /*height: 9vh;*/
    width: 100%;
}

header h1 {
    position: absolute;
    left: 120px;
    color: white;
    line-height: 70px;
}

header li {
    top: 0;
    color: white;
    margin-right: 4vw;
    list-style-type: none;
    min-width: 100px
}

a {
    text-decoration: none;
    color: white;
    display: block;
    /* 增加 display: block; */
    padding: 0 20px;
    /* 增加 padding 以增大宽度 */
}

a:hover {
    background-color: #000;
    color: aquamarine;
}

header ul {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 5vw;
    top: 0;
    line-height: 70px;
}

.hidden {
    display: none;
}

#image_preview {
    max-width: 14rem;
    max-height: 8rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 增加 min-height: 100vh; */
    /*min-height: 81vh;*/
    min-height: calc(100vh - 120px);

}


.title {
    text-align: center;
}

.title h3 {
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-size: 32px;
}

.upload_box {
    width: 18rem;
    height: 11rem;
    color: #666666;
    background-color: white;
    border: #000 dashed 1px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    justify-content: center;
}

.upload_box.dragover {
    /* background-color: grey; */
    color: #eeeeee;
    border: 0.1rem solid rgb(0, 120, 212);
    box-shadow: inset 0 0 0 0.1rem rgb(0, 120, 212);
}

.upload_box:hover {
    border-color: rgb(0, 120, 212);
}

.config {
    display: flex;
    flex-direction: column;
    margin: 0.5rem;
    text-align: center;
    align-items: center;
    justify-content: center;
}


button {
    color: rgb(0, 120, 212);
    text-decoration: none;
    border: rgb(0, 120, 212) solid 1px;
    padding: 10px 25px;
    cursor: pointer;
    margin: 0.5rem;
}

button:hover {
    background-color: rgb(16, 110, 190);
    color: white;
}

input[type="range"] {
    -webkit-appearance: none;
    background: linear-gradient(75deg, rgb(0, 145, 255), rgb(16, 110, 190));
    width: 10rem;
    outline: none;
    border-radius: 4px;
    height: 12px;
    box-shadow: 0 0 6px white;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f53b57;
    transition: 0.3s;
}

input[type="range"]:active::-webkit-slider-thumb {
    background-color: #ef5777;
    box-shadow: 0 0 0 6px rgba(155, 73, 146, 0.4);
}


.range_select {
    text-align: center;
}

.show_box {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem;
}

#conf_value {
    max-width: 25px;
    min-width: 25px;
    text-align: center;
}


.show_box div div:first-child {
    padding-bottom: 25px;
}


.image_box {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.image_box img {
    max-width: 32rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-height: 32rem;
    border-radius: 10px;
    margin: 1rem;
}


.image_box h3 {
    text-align: center;
}

footer {
    background-color: #000;
    color: #b7b7b7;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    width: 100%;

}

.icon {
    width: 20px;
    height: 20px;
}

footer a {
    color: #b7b7b7;
    text-decoration: none;
}

.at {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#pred_result {
    position: absolute;


}

.loader {
    position: absolute;
}

.loading {
    filter: brightness(30%);
}

#spinner {
    box-sizing: border-box;
    stroke: #cccccc;
    stroke-width: 3px;
    transform-origin: 50%;
    animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(450deg);
    }
}

@keyframes line {
    0% {
        stroke-dasharray: 2, 85.964;
        transform: rotate(0);
    }
    50% {
        stroke-dasharray: 65.973, 21.9911;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 2, 85.964;
        stroke-dashoffset: -65.973;
        transform: rotate(90deg);
    }
}

@media (max-width: 700px) {
    .title h1 {
        display: none;
    }
    .image_box img {
    	   max-height: 30rem;
    	   max-width: 30rem;
    }
}